<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        width: 500px;
        height: 500px;
        background-color: red;
        overflow: auto;
        padding-top: 10px;
        position: relative;
      }
      .content{
        height: 1000px;
        background-color: green;
      }
      .test{
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: yellow;
      }
    </style>
  </head>
<body>

  <div class="container">
    <div class="content"></div>
    <div class="test"></div>
  </div>
 
<!-- <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas> -->
 
<script>

var yellow = window.localStorage.getItem('yellow')
var yellowImg = new Image()
yellowImg.src = yellow
 
var c=document.getElementById("myCanvas");
 
var ctx = c.getContext('2d');
var x = 100,
    y = 100,
    width = 100,
    height = 100,
    angle = 90*Math.PI/180,
    rectCenterPoint = {x: 100, y: 100}; // 矩形中心点
 
// 旋转前(红色矩形)
ctx.fillStyle = '#f00';
ctx.fillRect(x, y, width, height);
 
// 旋转后(绿色矩形)
ctx.translate(rectCenterPoint.x, rectCenterPoint.y);
ctx.rotate(angle);
ctx.translate(-rectCenterPoint.x, -rectCenterPoint.y);
ctx.fillStyle = '#690';
ctx.fillRect(x, y, width, height);
</script>
 
 
 
</body>